<template>
  <!-- 商品橱窗对话框 -->
  <div class="add">
    <el-dialog
      title="添加黑名单"
      :visible.sync="isAdd"
      width="40%"
      :before-close="cancel">
      <div class="add-content">
        <div class="label">用户昵称</div>
        <div class="input">
          <el-input v-model="nickname" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button type="success"  @click="submit">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {save} from "@/project/service/black"

export default {
  name:'add',
  props: {
    isAdd:{
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      nickname:'',//输入内容
    }
  },
  methods: {
    //提交
    submit(){
      save({nickname:this.nickname},data => {
        console.log(data)
        if(data=='204'){
          this.$message.success('添加成功')
          this.cancel(true)
        }
      })
    },
    //取消
    cancel(isUpdate){
      this.nickname = ''
      this.$emit('close',isUpdate);
    },
  }
}
</script>

<style lang="less" scoped>
  .add-content{
    display: flex;
    align-content: center;

    .label{
      padding: 5px 0;
    }

    .input{
      margin-left: 10px;
    }
  }
</style>
